import React from 'react'
import { RefreshControl, ListView, Icon, WhiteSpace } from 'antd-mobile';


console.log('height')
console.log(window.innerHeight)

const rootFontSize = getComputedStyle(window.document.documentElement)['font-size'] || window.document.documentElement.currentStyle['font-size']

console.log(rootFontSize)

class List extends React.Component{
  constructor(props){
    super(props)
  }

  componentDidMount(){
    this.props.onEndReached()
  }

  render(){

    return (
      <ListView
        dataSource={this.props.dataSource}
        renderRow={this.props.row}
        initialListSize={this.props.size}
        pageSize={this.props.size}
        style={{
          height: window.innerHeight - rootFontSize.substr(0,rootFontSize.length-2) * 2.74
        }}
        scrollerOptions={{ scrollbars: true }}
        onScroll={() => { console.log('scroll'); }}
        refreshControl={<RefreshControl
          refreshing={this.props.refreshing}
          onRefresh={this.props.onRefresh}
          prefixCls='am-refresh-control'
          icon={[
            <div key="0" className="am-refresh-control-pull">
              <span>下拉可以刷新</span>
            </div>,
            <div key="1" className="am-refresh-control-release">
              <span>松开立即刷新</span>
            </div>,
          ]}
          distanceToRefresh={80 / 2 * (window.devicePixelRatio || 2)}
          loading={(<div ><Icon type="loading" />&nbsp;正在刷新数据中...</div>)}
        />}
        onEndReached={this.props.onEndReached}
        onEndReachedThreshold={10}
        renderFooter={() => <div style={{ padding: 5, textAlign: 'center' }}>
          {this.props.loading ? '加载中...' : ''}
        </div>}
      />
    )
  }
}

export default List